<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        ul:first-child{
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
        }
        button{
            float: left;
        }

        ul:nth-child(4){
            list-style: none;
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
        }

        .active{
            background: pink;
            color: #fff;
        }


    </style>

</head>
<body>
    
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
        <li>孙七</li>
    </ul>
    <button>&gt;&gt;</button>
    <button>&lt;&lt;</button>

    <ul id="ul1">
    </ul>

</body>
<script>

    var ulLeft = document.querySelector('ul'); //获取到第一个ul

    ulLeft.onclick = (e) => {
        if(e.target.nodeName == 'LI'){  //点击的事件源名为li  //发生的事件冒泡
            e.target.classList.toggle('active');//对应切换active样式
        }
    }

    var btn1 = document.querySelectorAll('button')[0];//获取到第一个按钮
    var btn2 = document.querySelectorAll('button')[1];//获取到第二个按钮

    btn1.onclick = (e) =>{  //点击第一个按钮
        var liList = document.querySelectorAll(".active");  //选中所有带active样式的li数组
        for(var i = 0;i < liList.length;i++){
            ul1.appendChild(liList[i]); //循环向第二个ul插人第一个ul带active样式的li元素
        }
    }
    btn2.onclick = (e) =>{  //点击第二个按钮
        var liList = document.querySelectorAll(".active"); //选中所有带active样式的li数组
        for(var i = 0;i < liList.length;i++){
            ulLeft.appendChild(liList[i]);//循环向第一个ul插人第二个ul带active样式的li元素
        }
    }


</script>



</html>